<template>
  <div class="customer">
    <div class="box-title">会员基础信息&用户画像</div>
    <div class="table-box">
    <table class="table member-info" cellspacing="0" cellpadding="0">
      <tr class="tr">
        <td class="td">会员等级<span class="value">11</span></td>
        <td class="td">年龄段<span class="value">11</span></td>
      </tr>
      <tr class="tr">
        <td class="td">生日<span class="value">11</span></td>
        <td class="td">门店VIP
          <el-select value='0' size='mini' class="vip-select">
            <el-option label="否" value="0"></el-option>
            <el-option label="是" value="1"></el-option>
          </el-select>
        </td>
      </tr>
      <tr class="tr">
        <td class="td">是否登录小程序<span class="value">11</span></td>
        <td class="td">是否登录APP<span class="value">11</span></td>
      </tr>
    </table>
    </div>
    <div class="box-title">本店订单（预定&在住）</div>
    <div class="table-box order-list">
    <table class="table" cellspacing="0" cellpadding="0">
      <tr class="th">
        <td class="td">订单号</td>
        <td class="td">状态</td>
        <td class="td">客源</td>
        <td class="td">房号</td>
        <td class="td">入离日期</td>
      </tr>
      <tr v-for="(item,index) in orderList" :key="index">
        <td>{{item.OrderID}}</td>
        <td>{{item.RmStatus=='R'?'预订':'入住'}}</td>
        <td>{{item.GuestSrcName}}</td>
        <td>{{item.RmNo?item.RmNo:'未入住'}}</td>
        <td>{{item.ArrDate}}~{{item.DepDate}}</td>
      </tr>
    </table>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {      
      memberInfo:{
        birthday:'',
        level:'',
        age:'',
        wechat:'',
        app:''
      },
      orderList:[]
    };
  },
  methods: {
  },
  created() {
  },
};
</script>

<style lang="less" scoped>
 .vip-select{
   padding-left: 10px;
   width: 100px;
 }
::-webkit-scrollbar{
    // display:none;
    width:0px !important; 
    height: 0px !important;
  }
  .customer{
    width: 100%;
    padding: 10px 20px;
    font-size: 0;
    box-sizing: border-box;
    color: #393939;
    .box-title{
      margin: 20px 0 10px 0; 
      font-size: 14px;
      color: #48484A;
      font-weight: bold;
    }
    .table-box,.table-box.order-list{
      width: 100%;
      overflow:scroll;
      border:solid #E6E5E8; 
      border-width:1px;
      border-radius: 4px;
      border-bottom: none;
    }
    // .table-box.order-list{
    //   border-bottom:1px solid #E6E5E8;
    // }
    // .table-box.order-list::-webkit-scrollbar{
    //   width:0px !important;
    //   height: 8px !important;      
    // }
    .table{
      width: 100%;
      tr{
        width: auto;
      }
      td{
        height: 28px;
        // min-width: 60px;
        width:30px !important;
        white-space: nowrap;
        font-size: 12px;
        color: #7D7C7F;
        text-align: center;
        line-height: 28px;
        padding: 0 5px;
        border:solid #E6E5E8; 
        border-width:0px 0px 1px 0px;
        &:last-child{
          border-right: none;
        }
      }
      .th{
        background-color: #F9F9FB;
        .td{
          color: #7D7C7F;
        }
      }
    }
    .member-info{
      td{
        border-right-width:1px;
        text-align: left;
        span{
          padding-left: 10px;
        }
      }
    }
  }
</style>